
import { ListView } from 'antd-mobile';
import React from 'react'
import ReactDOM from 'react-dom'
import Evaluation from '../../components/Evaluation'
import { withRouter } from 'react-router-dom'
import Tit from '../../components/Tit'
import './AllEvaluation.less'
class AllEvaluation extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => {
                return row1 !== row2
            },
        });
        this.state = {
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: true,
            pageIndex: 1
        };
    }

    // If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
    // componentWillReceiveProps(nextProps) {
    //   if (nextProps.dataSource !== this.props.dataSource) {
    //     this.setState({
    //       dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
    //     });
    //   }
    // }

    componentDidUpdate() {
        document.body.style.overflow = 'auto';
    }

    // genData(pIndex = 0) {
    //   //  console.log(pIndex)
    //     const dataArr = [];
    //     postData('/api/goods/getCommentsList', { commonId: this.props.match.params.id, pageNum: this.state.pIndex, pageSize: 20 }, (params) => {
    //       //  console.log(params)
    //         dataArr.push(...params.data.list);
    //         if (this.state.pIndex === 1) {
    //             this.setState({
    //                 dataSource: this.state.dataSource.cloneWithRows(dataArr),
    //             })
    //         }
    //     })
    //     return dataArr;
    // }
    componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        this.$postData('/api/goods/getCommentsList', { commonId: this.props.match.params.id, pageNum: 1, pageSize: 20 }, (params) => {
          //  console.log(params)
            this.setState({
                height: hei,
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(params.data.list),
            })
            this.rData = params.data.list
        })
    }

    // onRefresh = () => {
    //     this.setState({ refreshing: true, isLoading: true });
    //     // simulate initial Ajax
    //     setTimeout(() => {
    //         this.rData = this.genData();
    //         this.setState({
    //             dataSource: this.state.dataSource.cloneWithRows(this.rData),
    //             refreshing: false,
    //             isLoading: false,
    //         });
    //     }, 600);
    // };

    onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
      //  console.log('reach end', event, this.state);
        this.setState({ isLoading: true });
        this.$postData('/api/goods/getCommentsList', { commonId: this.props.match.params.id, pageNum: this.state.pageIndex + 1, pageSize: 20 }, (params) => {
          //  console.log(params)
            this.rData = [...this.rData, ...params.data.list];
          //  console.log(this.rData)
            this.setState({
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                pageIndex: this.state.pageIndex + 1
            })

        })
        return
    };

    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    height: 8,
                    // backgroundColor: '#F5F5F9',
                    // borderTop: '1px solid #ECECED',
                    // borderBottom: '1px solid #ECECED',
                }}
            />
        );
        const row = (rowData, sectionID, rowID) => {
          //  console.log(rowData)
          //  console.log(sectionID)
          //  console.log(rowID)
            // if (index < 0) {
            //     index = this.state.dataSource.length - 1;
            // }
            // console.log(this.state.dataSource)
            // const obj = this.state.dataSource[index--];
            // console.log(obj)
            return (
                <div key={rowID}
                    className='Link2'
                >
                    <Evaluation Eva={rowData}></Evaluation>
                </div>
            );
        };
        return (<div className='AllEva'>
        <Tit zz={true} tit={'全部评价'}></Tit>
            <ListView
                key='0'
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                // renderHeader={() => <span>Pull to refresh</span>}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                </div>)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll={this.state.useBodyScroll}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>);
    }
}
export default withRouter(AllEvaluation)